<script setup lang="ts">
  import { ref } from 'vue'

  const props = defineProps<{
    value: string,
    tabs: string[],
  }>()

  const emits = defineEmits(['change'])

  const activeTab = ref(props.value)

  function changeTab(t) {
    activeTab.value = t
    emits('change', t)
  }
</script>

<template>
  <view class="ranking-tab">
    <view class="tab" v-for="t in tabs" :key="t" @click="() => changeTab(t)">
      <text>{{ t }}</text>
      <view class="tab-bar" v-if="activeTab === t"></view>
    </view>
  </view>
</template>

<style scoped lang="scss">
  .ranking-tab {
    width: 100%;
    display: flex;
    justify-content: space-evenly;

    .tab {
      color: white;
      font-weight: medium;
      font-size: 12px;
      position: relative;
      padding-bottom: 4px;
    }

    .tab-bar {
      background: linear-gradient(90deg, #FDE29B 0%, #FFFFD0 100%);
      height: 4px;
      position: absolute;
      bottom: 0;
      left: 5px;
      right: 5px;
    }
  }
</style>
